import React from "react";
import { Provider } from "react-redux";

import { ACTION_ADD } from './actions/actions.js'
import { createBack } from "./actions/nameActions.js";

import Contain from "./Components/Contain.js";
import Guiling from "./Components/Guiling.js";
import Authname from "./Components/Authname.js";
import store from "./store/index.js";


class App extends React.Component {
  render() {


    // //创建action操作对象
    // const ACTION_ADD = {
    //   type: 'ADD_ONE',
    //   num: 1
    // }


    // //创建reducer函数
    // const reducer = (state = 10, action) => {
    //   switch (action.type) {
    //     case 'ADD_ONE':
    //       return state + action.num
    //     default:
    //       return state
    //   }
    // }


    //创建store对象并且调用
    // const store = createStore(reducerMath);

    console.log(store.getState());; //查看store里面的state数据 ,此时state的num为初始值10

    // // 通过调用dispatch函数对state进行修改,每一次的dispatch都会经过reducer函数处理,并且传入相应的action对象作为参数
    store.dispatch(ACTION_ADD(1));
    console.log(store.getState().reducerMath);  //state=11
    // //重复一遍
    store.dispatch(ACTION_ADD(1));
    console.log(store.getState().reducerMath);  //state=12
    // 对另一个reducerName进行修改state数据
    store.dispatch(createBack(',悠悠我心'));
    console.log(store.getState().reducerName);     // sologon="青青子衿,悠悠我心"
    console.log(store.getState());

    console.log('测试的阿萨')



    // react-redux(Provider)分为展示组件(UI层的渲染)和容器组件(逻辑数据处理) 

    return (

      // //最原始的写法
      //   <div className="Example" id="my-element">
      //   <div
      //     className="greeting"
      //     style={{ background: "LightPink", color: "white" }}
      //     onClick={() => { store.dispatch(ACTION_ADD(2)); alert("已加2"); console.log(store.getState()) }}
      //   >
      //     Hello World,点击一次,state+2
      //   </div>
      //   <br></br>
      //   <div
      //     className="greeting"
      //     style={{ background: "LightSkyBlue", color: "white" }}
      //     onClick={() => { store.dispatch(ACTION_ADD(-2)); alert("已减2"); console.log(store.getState()) }}
      //   >
      //     Hello World,点击一次,state-2
      //   </div>
      // </div>


      <Provider store={store}>
        <Contain />
        <Guiling />
        <p style={{ color: "HotPink", fontSize: 16, fontWeight: 500, textAlign: "right" }}>{store.getState().reducerMath.des}</p>
        <Authname />
      </Provider>


    );
  }
}

export default App;
